<template>
    <popup
        ref="popupRef"
        title="新增"
        :async="true"
        width="40%"
        :clickModalClose="true"
        @confirm="handleConfirm"
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            label-width="130px"
            :rules="formRules"
            label-position="right"
        >
            <el-form-item label="项目名称" prop="title">
                <el-input
                    v-model="formData.title"
                    size="small"
                    clearable
                    placeholder="请输入项目名称"
                />
            </el-form-item>
            <el-form-item label="项目负责人">
                <el-select
                    class="flex-1"
                    multiple
                    v-model="formData.leader"
                    placeholder="请选择项目负责人"
                    size="small"
                >
                    <el-option
                        v-for="(item, index) in cateList"
                        :key="index"
                        :label="item.name"
                        :value="item.id.toString()"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="请款发起人">
                <el-select
                    multiple
                    class="flex-1"
                    v-model="formData.applicant"
                    placeholder="请选择请款发起人"
                    size="small"
                >
                    <el-option
                        v-for="(item, index) in cateList"
                        :key="index"
                        :label="item.name"
                        :value="item.id.toString()"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="项目计划开工日期" prop="registration_date">
                <el-date-picker
                    v-model="formData.start_time"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请输入项目计划开工日期"
                    size="small"
                />
            </el-form-item>

            <el-form-item label="项目计划竣工日期" prop="registration_date">
                <el-date-picker
                    v-model="formData.end_time"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请输入项目计划竣工日期"
                    size="small"
                />
            </el-form-item>
            <el-form-item label="参建单位" label-position="top">
                <el-button link type="primary" @click="handleUnitAdd"> 新增 </el-button>
                <el-table :data="formData.unit">
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="unit_text" label="参建单位" align="center">
                        <template #="{ row }">
                            <el-select
                                v-model="row.unit_id"
                                clearable
                                size="small"
                                placeholder="请选择参建单位"
                            >
                                <!-- <el-option label="测试" :value="111" :key="1900" /> -->
                                <el-option
                                    v-for="item in projectUnit"
                                    :label="item.title"
                                    :value="item.id"
                                    :key="item.id"
                                />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contract_amount" label="合同额(元)" align="center">
                        <template #default="{ row }">
                            <el-input
                                v-model="row.contract_amount"
                                clearable
                                size="small"
                                placeholder="请输入合同额"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template #default="{ row }">
                            <el-input
                                v-model="row.remark"
                                clearable
                                size="small"
                                placeholder="请填写备注"
                            />
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center">
                        <template #default="{ row }">
                            <el-popconfirm title="确定删除?" @confirm="handleUnitDel(row)">
                                <template #reference>
                                    <el-button link type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="备注">
                <el-input
                    v-model="formData.remark"
                    type="textarea"
                    placeholder="请输入备注"
                    autosize
                    size="small"
                />
            </el-form-item>
        </el-form>
    </popup>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { alluser, adminAdd } from '@/api/financial/message'
import Popup from '@/components/popup/index.vue'
import { adminListss as projectList } from '@/api/financial/lists'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formData = reactive({
    title: '',
    leader: '',
    applicant: '',
    unit: [],
    start_time: '',
    end_time: '',
    remark: ''
})
const formRules = reactive({
    title: [{ required: true, message: '请输入名称', trigger: ['change'] }]
})
// 参见单位新增
const handleUnitAdd = () => {
    formData.unit.push({
        unit_id: '',
        contract_amount: '',
        remark: ''
    })
}
const handleUnitDel = (row) => {
    const i = formData.unit.indexOf(row)
    i != -1 && formData.unit.splice(i, 1)
}
// 打开弹窗
const open = () => {
    popupRef.value?.open()
}
// 分类列表
const cateList = ref([])
const projectUnit = ref([])
onMounted(async () => {
    cateList.value = await alluser()
    const data = await projectList({ key: 'finance_unit_cate' })
    projectUnit.value = data.lists.filter((item) => item.cate_id === 1)
})

// 表单确认
const handleConfirm = async () => {
    console.log('🚀🚀🚀', formData)
    await formRef.value?.validate()
    fetchAdd()
}
const fetchAdd = async () => {
    await adminAdd(formData)
    popupRef.value?.close()
    emit('success')
}
// 表单取消
const handleClose = () => {
    emit('close')
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-form) {
    .el-form-item {
        margin-bottom: 20px;
    }
}
</style>
